<template>
 <div>
    <el-button v-show="showBtn" :type="edit=='编辑'?'info':'success'" size="mini" :class="edit!='编辑'?'xinzen':'bianji'" :disabled="isShow" style="margin: 10px 10px" @click="dialogVisible = true">
      
      <i class="el-icon-plus" v-if="edit=='新增'"></i>
      <i class="el-icon-edit" v-else></i>
      {{edit}}
    
    </el-button>
        <el-dialog
            :title="edit=='编辑'?'修改客户档案':'新增客户档案'"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <!-- 插入form -->
                <el-form :model="editData" :rules="rules" :style="{marginLeft:'50px'}">
                    <el-form-item label="审核类型" prop="bpmnType" >
                        <el-select :style="{width:'300px'}" v-model="editData.bpmnType" placeholder="所有">
                          <el-option 
                            v-for="(item ,index) in aduditList"
                            :key="index"
                            :label="item.name"
                            :value="item.value"
                          >
                           </el-option>
                         
                        </el-select>
                    </el-form-item> 
                    <!-- 上传组件 -->
                    <el-form-item :label="'请选择文件'">
                          <el-upload
                            :limit="1"
                            action=""
                            :on-exceed = chaochu
                            class="upload-demo"
                            ref="upload"
                            :on-change="uploadFile"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="success">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能选择类型为bmpn格式的流程文件</div>
                          </el-upload>
                    </el-form-item>

                    <el-form-item   :label="'备\xa0\xa0\xa0\xa0\xa0\xa0\xa0注'" prop="info">
                          <el-input
                          :style="{width:'300px'}"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="editData.info">
                          </el-input>
                    </el-form-item>
                </el-form>


            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click=submitUpload >确 定</el-button>
            </span>
    </el-dialog>
</div>
</template>
<script>
import {updateCustomer,addCustomer,addBpmnInfo} from '@/request/api'
  export default {
    props:{
      showBtn:{
        type:Boolean,
        default:true
      },
      edit:{
        type:String,
        default:'流程文件部署'
      },
      
    },
    data() {
      return {
         editData:{
            bpmnType:'',
            file:null,
            info:''
          },
        fileList: [],
         isShow:false,
          dialogVisible: false,
          aduditList:[
        {
        name:"服务套餐",
        value:"car_package"
        },
        {
        name:"事假",
        value:"casual-leave"
        },
        {
        name:"病假",
        value:"sick-leave"
        }
        ],
        rules:{
           bpmnType: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          file: [
            { required: true, message: '请正确输入', trigger: 'blur' }
          ],
          info: [
            {  required: true, message: '请选择性别', trigger: 'change' }
          ],
        }
       
      };
    },
    methods: {
      chaochu(files,fileList){
        this.$message.warning("超出限制，只能上传一个文件")
      },
      uploadFile(file,fileList){
          console.log(111,file);
          this.fileList = fileList
          this.editData.file = fileList[0].raw
          
      },
       async  submitUpload() {
          console.log(this.editData);
          let  res =await addBpmnInfo({...this.editData})
          if(!res)return
          console.log(res);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

  async updateC(){
      let res = await updateCustomer(this.editData)
      if(!res) return 
       console.log(res);
      this.dialogVisible = false
      if(res.code!=200){
         this.$message.error(res.msg)
      }else{
          this.$message.success(res.msg)
      }
     
     
      },
     async add(){
      let res = await addCustomer({...this.editData})
      if(!res) return 
     
       console.log(res);
      this.dialogVisible = false
       if(res.code!=200){
         this.$message.error(res.msg)
      }else{
          this.$message.success(res.msg)
      }
     
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style lang='less' scoped>

  .xinzen{
    background: #e8f4ff;
    border: 1px solid  #a3d3ff;
    color: #1890ff;
    &:hover{
      background-color: #1890ff;
      color: white;
    }
  }
    .bianji{
    background: #e7faf0;
    border: 1px solid  #d0f5e0;
    color: #71e2b4;
    &:hover{
      background-color: #13ce66;
      color: white;
    }
  }

</style>